<template>
	<div
		@click="handleDetail"
		class="item-wrap flex flex-col w-full px-[35px] cursor-pointer app-bg-react">
		<div class="flex flex-row w-full border-b border-border-2 py-[5px]">
			<account-avatar class="w-[30px]" :width="36" :data="data.avatar" />
			<div class="flex-1 px-[8px] text-xs">
				<div class="">{{ data.userNick || data.userName }}</div>
				<div class="text-t-3">@{{ data.userName }}</div>
				<div class="text-t-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-[360px]">
					{{ data.content }}
				</div>
			</div>
			<div class="w-[30px] flex items-center flex-row-reverse">
				<span class="date-t text-xs text-t-4">{{ fmtDate(data.createdAt, 'DD/MM') }}</span>
				<base-icon
					size="20"
					color="var(--color-text-3)"
					class="icon-r"
					@click.stop="handleDelete"
					name="remove" />
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import AccountAvatar from '@/components/account/account-avatar/index.vue'
import { fmtDate } from '@/utils/date.ts'
import { BaseIcon } from '@/components/base'
import { useDialog, useRequest } from '@/hooks'
import { MessageStatus } from '@/enums'
import { useAppStore } from '@/store'
import { readNotifications, removeNotifications } from '@/api/message'

const appStore = useAppStore()
const props = defineProps({
	data: {
		type: Object,
		default: () => {
			return {}
		}
	}
})

const dialog = useDialog()
const emit = defineEmits(['delete', 'detail'])
const { run } = useRequest<any>(removeNotifications, {
	showSuccess: true,
	showError: true,
	onSuccess: () => {
		if (props.data.state === MessageStatus.unread) {
			appStore.reduceUnreadCount()
		}
		emit('delete', props.data.id)
	}
})

const handleDelete = () => {
	dialog.warning({
		titleT: 'action.delete',
		contentT: 'notice.delete.tip',
		confirmTextT: 'action.delete',
		cancelTextT: 'action.cancel',
		confirmFn: async () => {
			run({
				ids: [props.data.id]
			})
		},
		cancelFn: () => {
			console.log('cancel')
		}
	})
}

const handleDetail = () => {
	console.log(props.data, MessageStatus.unread)
	if (props.data.state === MessageStatus.unread) {
		// 执行读消息操作，并减少未读消息计数
		readNotifications({
			noticeType: props.data.noticeType,
			ids: [props.data.id]
		})
		appStore.reduceUnreadCount()
	}
	emit('detail', props.data.tweetId)
}
</script>
<style lang="scss" scoped>
.item-wrap {
	.icon-r {
		display: none;
	}
	&:hover {
		.icon-r {
			display: inline;
		}
		.date-t {
			display: none;
		}
	}
}
</style>
